Thanks for this! If I see context of { themeConfig: undefined, theme: "dark", ...} I presume that just means there’s no custom theme applied at the moment.

I’m not too sure how to use ThemeProvider in that scenario though, in order to get Vibe to play with the dark theme. Do you know what props you’d expect to pass to ThemeProvider with such a context in order to get Vibe components to adapt to the current system theme?

Hi @danlester,

Undefined = default theme! 🙂

And working on adding this to the docs, but in the mean time, I hope this code sample is helpful!

import mondaySdk from "monday-sdk-js";



const monday = mondaySdk();



export const useGetContext = () => {

  const [context, setContext] = useState({});





  useEffect(() => {

    monday.listen("context", (res) => {

      setContext((previousContext) =>

        isMatch(previousContext, res.data) ? previousContext : res.data

      );

    });

  }, []);





  return context;

};



const AppWrapper = () => {

  const context = useGetContext();



  return (

    <Flex

      id="main"

      className={cx(context.theme + "-app-theme", "main")}

    >

      <ThemeProvider theme={context.themeConfig}>

        {/* Your app components go here */}

        <App />

      </ThemeProvider>

    </Flex>

  );

};

Best,

Rachel

Thanks for this - very helpful.

I’d ended up with something similar from playing around and some inspection of the source code:

<ThemeProvider theme={context?.theme} themeClassSpecifier={`${context?.theme || "default"}-app-theme`}>

This does seem to do the trick, but wonder if I’ve misunderstood what themeClassSpecifier really does?

Here is another question, related to the ThemeProvider:

I am developing a board header app, and using the ThemeProvider at the root level of my app. The app is getting the monday.com theme object from the context correctly. So in theory, I could use the theme to style my components coherently with the monday.com theme.

However, I could not find information how to use the theme to directly style my components. I assumed that it would be something along the lines of: Use a <ThemeProvider /> at the root level of my app, and then add useTheme() or similar hook to my components to access the theme properties and use them to style my components. Unfortunately I could not find a useTheme() or similar hook in monday-ui-react-core.

Would you please give me a hint how to use the ThemeProvider to apply the monday.com theme’s style to my app components?

Hello there @zezo,

I checked with the team in charge of the Vibe design system and they recommended you implement something like this 😀

Please let me know how that goes!

Cheers,

Matias

Hi @Matias.Monday,

Thank you for checking about my inquiry with the Vibe team!

Actually, this is exactly what I am doing currently: I am getting the ThemeProvider from the monday context and I can read its properties just fine after getting it.

My question is more about the next step: How to actually use the properties of the ThemeProvider to apply monday styles to my components?

Cheers,

Zezo

@zezo if you are referring to your own custom components the Vibe team suggested you use color tokens from the “Foundations” section and they will adapt themselves.

For example, if you use primary-color it will dynamically change according to the product/system theme.

@Matias.Monday , thanks for your quick reply.

Yes, I was referring to my own custom components, and I was wondering if there is a more comprehensive example, like a demo app, showcasing the integration of the Vibe design system, including the theming, in a custom app for monday?

Hello again @zezo,

The team mentioned that even though that is not the purpose of the Vibe system, it is possible to do that with the tokens as explained before. We don’t have an example but it should be straight forward, every token is a CSS Custom Property that can be used anywhere in your custom components’ CSS, for example:

.custom-component {

  color: var(--primary-color);

  box-shadow: var(--box-shadow-xs);

  padding: var(--spacing-medium);

}

You can see all the tokens we use under the “Foundations” section in Vibe Storybook.

Hello @Matias.Monday,

Thank you for the infos and for checking out my inquiry with the Vibe team. You got me up to speed on the theming topic 👍

Happy to help @zezo !!